<template>
    <el-dialog
        title="讲师列表"
        :visible.sync="visible"
        :modal-append-to-body="false"
        width="70%">
        <!-- style="height: 500px;" 可去除后做自适应 -->
        <el-form :inline="true">
            <el-form-item label="关键词" prop="name">
                <el-input v-model="form.name" placeholder="搜索讲师名称" class="input-width"></el-input>
            </el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form>
        <el-table :data="data">
            <el-table-column type="index" align="center" label="序号" width="50"/>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="头像">
                <template slot-scope="{row}">
                    <img :src="row.img" class="logo w-8" v-if="row.img"/>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button
                    type="primary"
                    @click="onAddClick(row)"
                    v-if="!isChoiced(row)">选择</el-button>
                    <el-button
                    type="success"
                    disabled
                    @click="onAddClick(row)"
                    v-else>已选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="totalElements > 0" class="footer">
            <pagination
            ref="pagination"
            :currentPage="form.page"
            :pageSize="form.size"
            :handleCurrentChange="onCurrentChange"
            :handlePageSizeChange="onPageSizeChange"
            :totalElements="totalElements"
            ></pagination>
        </div>
    </el-dialog>
</template>

<script>
import Pagination from '../base/Pagination';

export default {
    components: {
        Pagination,
    },
    props: ['list', 'companyId'],
    data() {
        return {
            visible: false,
            loading: false,
            form: {
                page: 1,
                size: 20,
                name: '',
                defineCompanyId: null,
            },
            totalElements: 0,
            rules: {},
            data: [],
        };
    },
    watch: {
        visible(val) {
            if (!val) {
                this.resetForm();
            } else {
                if (this.companyId !== undefined) {
                    this.form.defineCompanyId = this.companyId;
                }
                this.fetchData();
            }
        },
    },
    computed: {},
    methods: {
        open() {
            this.visible = true;
        },
        close() {
            this.visible = false;
        },
        onAddClick(row) {
            this.$emit('addTeacher', row);
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('teacher', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        resetForm() {
            this.form.page = 1;
            this.form.name = '';
        },
        isChoiced({id}) {
            return this.list.includes(id);
        },
    },
    created() {
    },
};
</script>
